<template>
	<div class="main-box">
      <chart-pie
        v-if="overpie && nooverpie.length"
        id="nooverpie"
        :title="`进\n行\n中\n的\n比\n赛`"
        :chartdata="nooverpie"
        class="chart-box"
      /><div v-else class="chart-box" v-loading="true" />
      <infocard 
        v-if="nooverdata && nooverdata.length"
        :listdata="nooverdata"
      /><div v-else class="chart-box" v-loading="true" />
      <chart-line
        v-if="applayline && applayline.length"
        title="我的比赛-报名人数-走势图"
        class="col-span-2"
        id="seven-line"
        :xAxisDate="[...new Array(6).fill(undefined).map((e,i)=>`${i+1}天前`).reverse(),'今天']"
        subtext="最近七天"
        :chartdata="applayline"
      /><div class="col-span-2" v-else v-loading="true" />
      <chart-pie
        v-if="overpie && overpie.length"
        id="overpie"
        :title="`历\n史\n比\n赛`"
        :chartdata="overpie"
        class="chart-box"
      /><div v-else class="chart-box" v-loading="true" />
      <infocard
        v-if="overdata && overdata.length"
        :listdata="overdata"
      /><div v-else class="chart-box" v-loading="true" />
      <chart-bar
        v-if="hisbar"
        title="我的比赛报名人数"
        class="col-span-2"
        id="his-line"
        subtext="最近七天"
        :chartdata="hisbar"
      /><div class="col-span-2" v-else v-loading="true" />
  </div>
</template>

<script>
  import { getpiedata,getlinedata,getbardata,gettagdata } from '@/api/htchart'
  import chartPie from './modules/pie.vue'
  import chartLine from './modules/line.vue'
  import chartBar from './modules/bar.vue'
  import infocard from './modules/infocard.vue'
  // legend
  // series
	export default{
		name:"htindex",
    components:{chartPie,chartLine,infocard,chartBar},
		data(){
			return{
        // allcpttnum:[],
        // hiscpttnum:[],
        // piedata:false,
        // linedata:false
        nooverpie:false,
        overpie:false,
        nooverdata:false,
        overdata:false,
        applayline:false,
        hisbar:false
			}
		},
		async mounted() {
      const { noover,over } = await getpiedata()
      this.applayline = await getlinedata()
      setTimeout(()=>{
        this.nooverpie = noover
        this.overpie = over
        console.log({noover})
      },500)
      this.hisbar = await getbardata()
      const { nooverdata,overdata } = await gettagdata()
      this.nooverdata = nooverdata
      this.overdata = overdata
		},
    computed:{
      noovermy(){
        const { nooverpie } = this
        if(nooverpie && nooverpie.length)
          return nooverpie.find(e=>e.name==='我自己').children.map(e=>{delete e.itemStyle;return e})
        else
          return []
      }
    }
	}
</script>

<style lang="scss" scoped>
  $boxHeigth:calc(100vh - 40px - 48px);
  $boxWidth:calc(100vw - 40px);
  .main-box{
    display: grid;
    height: $boxHeigth;
    width: $boxWidth;
    grid-template-columns:repeat(4,25%);
    grid-template-rows:repeat(2,calc(#{$boxWidth} / 4));
  }
  @media screen and (max-width: 768px){
    .main-box{
      grid-template-columns:repeat(2,50%);
      grid-template-rows:repeat(4,calc(#{$boxWidth} / 2)); 
    }
  }
  .chart-box{
    height:100%;
    width:100%;
  }
</style>
